import { t } from 'i18next'
import React, { FC } from 'react'
import { Avatar, IconStatusOffline, IconStatusVideoSrc, IconToggle } from '@/pages/manager/components'
import {
	IconMute,
	ItemLabelWrap,
	StyledListItem,
	IconRight,
	IconSinglePoll,
	IconChairman,
	IconSpeaker,
	IconActionOffline,
} from './style'
import { ItemData, useMemberListStore } from './store'
import shallow from 'zustand/shallow'
import { IconStatusMute } from '../VmpView/style'
import { fetchToggleTree } from '@/pages/manager/store.fetch'
import { fetchCallOnlineMt, fetchMute } from '@/api/manager/actions'
import { useMccStore } from '@/pages/manager/store'
import useLock from '@/hooks/useLock'
import { useVmpTypeStore } from '../store.get'

export const ListItem: FC<ItemData> = (props) => {
	const { mcc, nestingLevel } = props
	const useStore = useVmpTypeStore((state) => state.getStore())
	const { openMap, update } = useMemberListStore(
		(state) => ({ openMap: state.openMap, update: state.update }),
		shallow
	)
	const isOpen = openMap[mcc.mtKey]
	const { memberList, isCall, setCalling } = useStore((state) => {
		return {
			isCall: state.callingMap[mcc.mtKey] ? state.callingMap[mcc.mtKey].isCall : false,
			setCalling: state.setCalling,
			memberList: state.memberList,
		}
	}, shallow)
	const isInEditOnAuto = useStore((state) => (!state._isStart || state._isEdit) && state.data.mode === 2)
	const isSelected = isInEditOnAuto ? false : memberList.map((x) => x.mt_key).includes(mcc.mtKey)
	const isSinglePoll = isInEditOnAuto
		? false
		: memberList.find((x) => x.mt_key === mcc.mtKey && x.member_type === 6)?.member_type === 6

	const isNotCurMeeting = mcc.mtKey !== '0.0.0.0_0'

	const handleOpenTree = () => {
		if (!mcc.isMt) {
			openMap[mcc.mtKey] = !openMap[mcc.mtKey]
			update({ openMap: { ...openMap } })
			fetchToggleTree({
				mcc,
				mtKey: mcc.mtKey,
				status: {
					isOpen: openMap[mcc.mtKey],
				},
			})
		}
	}
	const handleCall = () => {
		setCalling(mcc.mtKey)
		const meetingMoid = useMccStore.getState().mccInfo.meetingMoid
		fetchCallOnlineMt(meetingMoid, [mcc])
	}
	const handleMute = useLock(async () => {
		const meetingMoid = useMccStore.getState().mccInfo.meetingMoid
		await fetchMute(mcc.status.isMute, meetingMoid, mcc)
	})
	return (
		<StyledListItem>
			<ItemLabelWrap
				nestingLevel={nestingLevel}
				isOnline={mcc.status.isOnline}
				isVip={mcc.isMt && mcc.status.isVip}
				isMeeting={!mcc.isMt}
				isNameBlue={mcc.status.isManager || mcc.status.isDoubleFlow || isSinglePoll}
			>
				{isSinglePoll && <IconSinglePoll className="icon-single-poll" />}
				{!mcc.isMt && mcc.status.isOnline && (
					<IconToggle open={!!isOpen} className="icon-toggle" onClick={handleOpenTree} />
				)}
				<div className="avatar">
					<Avatar value={mcc} />
					{isSelected && <IconRight className="icon-right" />}
				</div>
				{mcc.isMt && mcc.status.isVip && <div className="vip">VIP</div>}
				{mcc.isMt && mcc.status.isChairman && <IconChairman />}
				{mcc.status.isSpeaker && <IconSpeaker />}
				<div className="name" title={mcc.name}>
					<pre data-mtid={mcc.mtKey}>{mcc.name}</pre>
				</div>
			</ItemLabelWrap>
			{!isCall && isNotCurMeeting && (
				<div className="mt-status">
					{!mcc.status.isOnline && <IconStatusOffline title={t('离线')} />}{' '}
					{mcc.status.isOnline && mcc.isMt && !mcc.status.isVideoSrc && (
						<IconStatusVideoSrc title={t('视频源')} />
					)}
					{mcc.status.isOnline && <IconStatusMute title={t('哑音')} isOn={mcc.status.isMute} />}
				</div>
			)}
			{!isCall && isNotCurMeeting && (
				<div className="mt-action">
					{!mcc.status.isOnline && <IconActionOffline title={t('呼叫')} onClick={handleCall} />}
					{mcc.status.isOnline && (
						<IconMute
							title={mcc.status.isMute ? t('取消哑音') : t('设置哑音')}
							isOn={mcc.status.isMute}
							onClick={handleMute}
						/>
					)}
				</div>
			)}
			{isCall && <div className="is-calling">{t('正在呼叫中...')}</div>}
		</StyledListItem>
	)
}
